<template>
  <view class="container">
    <!-- 支付成功信息 -->
    <view class="payment-info">
      <text class="payment-status">支付成功</text>
      <text class="payment-amount">￥{{ paymentAmount }}</text>
    </view>

    <!-- 按钮区 -->
    <view class="buttons">
      <!-- 返回首页按钮 -->
      <button class="return-home-btn" @click="goToHomePage">返回首页</button>
      <!-- 订单详情按钮 -->
      <button class="view-order-details-btn" @click="goToOrderDetails">订单详情</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 存储支付金额
const paymentAmount = ref(0);

// 页面加载时获取缓存中的订单信息
onMounted(() => {
  const orderDetails = uni.getStorageSync('orderDetails');
  if (orderDetails) {
    // 获取支付金额
    paymentAmount.value = orderDetails.totalAmount;
  } else {
    uni.showToast({ title: '订单信息未找到', icon: 'none' });
  }
});

//记得修改首页的网址
// 跳转到首页
const goToHomePage = () => {
  uni.navigateTo({
    url: '/pages/carwashing/washingcar',
    success: () => {
      console.log('跳转到首页成功');
    },
    fail: (err) => {
      console.error('跳转失败:', err);
    }
  });
};

// 跳转到订单详情
const goToOrderDetails = () => {
  uni.navigateTo({
    url: '/pages/carwashing/payorder/paydetails/paydetails',
    success: () => {
      console.log('跳转到订单详情成功');
    },
    fail: (err) => {
      console.error('跳转失败:', err);
    }
  });
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.payment-info {
  text-align: center;
  margin-bottom: 40px;
}

.payment-status {
  font-size: 24px;
  font-weight: bold;
  color: #FF4D4F;
  margin-bottom: 10px;
}

.payment-amount {
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

.buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

button {
  width: 80%;
  padding: 12px 0;
  border-radius: 5px;
  font-size: 16px;
  margin: 10px 0;
}

.return-home-btn {
  background-color: #FF4D4F;
  color: white;
  border: none;
}

.view-order-details-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>
